import { useState, useEffect, useMemo, useRef } from 'react'
import { resourcePath } from '../../../../../../../utils/resource';
import { Button } from 'antd';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import { createLayer, navByWkt, wktToFeature } from '../../../../../../../utils/helper/mapHelper';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
import BlockTitle from '../../../../../../framework/BlockTitle';
import BlockBody from '../../../../../../framework/BlockBody';
import { Icon, Style } from 'ol/style';
import useMap from '../../hooks/useMap';
import BlockPanel from '../../common/BlockPanel';
import FetchHelper from '../../../../../../../utils/helper/fetch-helper';
import ScrollTable from '../../../../../../common/ScrollTable';
import { SearchOutlined } from '@ant-design/icons';

export default function RcxTable(props) {
    const { title, mapIcon, mapScale } = props;
    const [datas, setDatas] = useState();
    const map = useMap();
    const [currentPage, setCurrentPage] = useState(1);
    const containerRef = useRef(null);
    const onDetailRef = useRef(props.onDetail);

    const layer = useMemo(() => {
        return createLayer((feature) => {
            return new Style({
                image: new Icon({
                    src: mapIcon,
                    scale: mapScale || 0.7,
                    anchor: [0.5, 1]
                })
            })
        }, [], {
            zIndex: 99
        });
    }, [mapIcon, mapScale]);

    useEffect(() => {
        if (layer && datas) {
            map.dispatchEvent({
                type: 'legend-layer',
                layer,
                icon: mapIcon,
                title
            });
            const features = datas?.filter(data => {
                return data.geom
            }).map(data => {
                const f = wktToFeature(data.geom)
                f.setProperties({ ...data });
                return f;
            })
            layer.getSource().addFeatures(features)
            layer.set('visible', false)
            map.addLayer(layer);
        }
    }, [layer, map, mapIcon, title, datas])

    useEffect(() => {
        FetchHelper.getJson(`/admin-api/ybyj/sp/list`, {
            name: '热成像云台'
        }).then(resp => {
            setDatas(resp?.rows?.map(row => {
                return {
                    ...row,
                    geom: `POINT(${row.longitude} ${row.latitude})`
                }
            }));
        });
    }, [])
    useEffect(() => {
        const handler = evt => {
            const features = map.getFeaturesAtPixel(evt.pixel);
            const targetFeature = features?.find(f => {
                return f.get('installPosition');
            })
            if (targetFeature) {
                onDetailRef.current?.(targetFeature.getProperties(), targetFeature);
            }
        }
        map.on('singleclick', handler);
        return () => {
            map.un('singleclick', handler);
        }
    }, [map])

    const columns = [
        {
            title: '站点名',
            dataIndex: 'installPosition',
            ellipsis: true
        },
        {
            width: 70,
            title: '操作',
            align: "center",
            render: (text, record) => {
                return <Button icon={<SearchOutlined />} style={{
                    color: "#0BDC95"
                }} type="link" size="small" onClick={e => {
                    props.onDetail?.(record);
                }}>详情</Button>
                // return <Button type="link" size="small" onClick={e => {
                //     props.onDetail?.(record);
                // }}>详情</Button>
            }
        }
    ];

    return <BlockPanel title={<div>
        {title}（<span>{datas?.length}</span>）
    </div>} bodyClassName='layout-v' className='fill h0' bodyStyle={{
        overflow: 'hidden'
    }}>
        <div ref={containerRef} className="table-div fill h0" style={{ height: '100%', overflow: "hidden" }}>
            <ScrollTable
                columns={columns}
                dataSource={datas}
                size="small"
                // bordered
                // autoScroll={true}
                // scrollSpeed={50}
                otherHeight={80}
                parentNode={containerRef}
                pagination={{
                    current: currentPage,
                    pageSize: 20,
                    simple: true,
                    onChange: (page) => {
                        setCurrentPage(page);
                    }
                }}
            />
        </div>
    </BlockPanel>;
}